<template>
  <div>
    <el-dialog v-bind="$atter"
               @opened="opened"
               custom-class="wg-dialog"
               v-model="state.show"
               :title="props.title"
               :width="props.width"
               :close-on-click-modal="false">
      <template #default>
        <slot></slot>
        <!-- <component
          :is="props.component"
          ref="dialogChildComponentRef"
          :props="props.params"
        ></component> -->
      </template>
      <template #footer
                v-if="!props.disabled">
        <el-button type="primary"
                   v-if="props.btns"
                   @click="onOk()">保存</el-button>
        <el-button type=""
                   @click="state.show = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, reactive } from "vue";
const { proxy } = getCurrentInstance() as any;
const dialogChildComponentRef = ref();
const props = defineProps({
  component: {},
  id: {
    default: "",
    type: String,
  },
  title: {
    default: "",
    type: String,
  },
  width: {
    default: "100%",
    type: Object,
  },
  params: {
    default: {},
    type: Object,
  },
  onOk: {
    default: () => {},
    type: Function,
  },
  btns: {
    default: ["ok", "cannel"],
    type: Array,
  },
  disabled: {
    default: false,
    type: Boolean,
  },
});

const state = reactive({
  show: true,
});

const opened = () => {
  proxy.$emit("opened", dialogChildComponentRef.value);
};

const onOk = () => {
  props.onOk();
};
</script>
<style lang="scss">
.wg-dialog {
  // max-height: calc(100% - 100px);

  .el-dialog__body {
    //border-top: 1px solid #dcdfe6;
    //border-bottom: 1px solid #dcdfe6;
    max-height: calc(100vh - 200px);
    min-height: 200px;
  }
}
</style>
